﻿<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>数据大屏</title>
  <script th:src="@{/js/data screen/jquery.js}"></script>

  <link th:href="@{/css/data screen/comon0.css}" rel="stylesheet"/>

</head>
<script>
  $(window).load(function(){
    $(".loading").fadeOut()
  })

  /****/
  $(document).ready(function(){
    var whei=$(window).width()
    $("html").css({fontSize:whei/20})
    $(window).resize(function(){
      var whei=$(window).width()
      $("html").css({fontSize:whei/20})
    });
  });
</script>
<script th:src="@{/js/data screen/echarts.min.js}"></script>
<script th:src="@{/js/data screen/js.js}"></script>
<body>
<div class="canvas" style="opacity: .2">
  <iframe frameborder="0" th:src="@{/js/data screen/index.html}" style="width: 100%; height: 100%"></iframe>
</div>
<div class="loading">
  <div class="loadbox"> <img th:src="@{/picture/data screen/loading.gif}"> 页面加载中... </div>
</div>
<div class="head">
  <h1>学生信息管理系统</h1>
  <div class="weather"><!--<img th:src="@{/picture/weather.png}"><span>多云转小雨</span>--><span id="showTime"></span></div>

  <script>
    var t = null;
    t = setTimeout(time,1000);//開始运行
    function time()
    {
      clearTimeout(t);//清除定时器
      dt = new Date();
      var y=dt.getFullYear();
      var mt=dt.getMonth()+1;
      var day=dt.getDate();
      var h=dt.getHours();//获取时
      var m=dt.getMinutes();//获取分
      var s=dt.getSeconds();//获取秒
      document.getElementById("showTime").innerHTML = y+"年"+mt+"月"+day+"-"+h+"时"+m+"分"+s+"秒";
      t = setTimeout(time,1000); //设定定时器，循环运行
    }

  </script>


</div>
<div class="mainbox">
  <ul class="clearfix">
    <li>
      <div class="boxall" style="height: 3.2rem">
        <div class="alltitle">学生年级分布</div>
        <div class="allnav" id="echart1"></div>
        <div class="boxfoot"></div>
      </div>
      <div class="boxall" style="height: 3.2rem">
        <div class="alltitle">模块标题样式2</div>
        <div class="allnav" id="echart2"></div>
        <div class="boxfoot"></div>
      </div>
      <div class="boxall" style="height: 3.2rem">
        <div style="height:100%; width: 100%;">
          <div class="sy" id="fb1"></div>
          <div class="sy" id="fb2"></div>
          <div class="sy" id="fb3"></div>
        </div>
        <div class="boxfoot">

        </div>
      </div>
    </li>
    <li>
      <div class="bar">
        <div class="barbox">
          <ul class="clearfix">
            <li class="pulll_left counter" id="studentTotalCount">12581189</li>
            <li class="pulll_left counter">2025</li>
          </ul>
        </div>
        <div class="barbox2">
          <ul class="clearfix">
            <li class="pulll_left">学生总人数 </li>
            <li class="pulll_left">新年快乐</li>
          </ul>
        </div>
      </div>
      <div class="map">
        <div class="map1"><img th:src="@{/picture/data screen/lbx.png}" alt="加载中"></div>
        <div class="map2"><img th:src="@{/picture/data screen/jt.png}" alt="加载中"></div>
        <div class="map3"><img th:src="@{/picture/data screen/map.png}" alt="加载中"></div>
        <div class="map4" id="map_1"></div>
      </div>
    </li>
    <li>
      <div class="boxall" style="height:3.4rem">
        <div class="alltitle">模块标题样式3</div>
        <div class="allnav" id="echart4"></div>
        <div class="boxfoot"></div>
      </div>
      <div class="boxall" style="height: 3.2rem">
        <div class="alltitle">模块标题样式4</div>
        <div class="allnav" id="echart5"></div>
        <div class="boxfoot"></div>
      </div>
      <div class="boxall" style="height: 3rem">
        <div class="alltitle">模块标题样式5</div>
        <div class="allnav" id="echart6"></div>
        <div class="boxfoot"></div>
      </div>
    </li>
  </ul>
</div>
<div class="back"></div>


<script th:src="@{/js/data screen/china.js}"></script>
<script th:src="@{/js/data screen/area_echarts.js}"></script>
<!--班级分布表-->
<script>  $(document).ready(function () {
  // 初始化 ECharts 实例
  var echart1 = echarts.init(document.getElementById('echart1'));

  // 定义图表配置项
  var option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: []
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      name: '人数',
      type: 'bar',
      data: []
    }]
  };

  // 设置初始配置
  echart1.setOption(option);

  // 使用 AJAX 获取数据
  $.ajax({
    url: '/datas/getGradeDistribution',
    type: 'GET',
    dataType: 'json',
    success: function (gradeDistribution) {
      // 提取年级名称和人数
      var grades = gradeDistribution.map(item => item.grade);
      var counts = gradeDistribution.map(item => item.count);

      // 更新图表数据
      echart1.setOption({
        xAxis: {
          data: grades
        },
        series: [{
          data: counts
        }]
      });
    },
    error: function (xhr, status, error) {
      console.error("Error fetching grade distribution data:", error);
    }
  });


  // 使用 AJAX 获取学生总人数
  $.ajax({
    url: '/datas/getStudentTotalCount',
    type: 'GET',
    dataType: 'json',
    success: function (data) {
      // 更新学生总人数
      $('#studentTotalCount').text(data.totalCount);
    },
    error: function (xhr, status, error) {
      console.error("Error fetching student total count:", error);
    }
  });


  // 为其他图表添加类似的 AJAX 请求
});
</script>
</body>
</html>
